<template>

  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="myH3">课程</h3>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入搜索内容" v-model="formSearch.coursename" suffix-icon="el-icon-search"
                    @keyup.enter.native="search" class="sousuo">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <h3 class="tongzhi">通知</h3>
        </el-col>
      </el-row>
    </div>


    <div class="container_body">
      <el-row :gutter="20">
        <el-col :span="17" style="height: 100px">
          <div class="container_body1" v-for="(course,index) in courseList" :key="index"
               @click="toCourseDirectory(course)">
            <el-row>
              <el-col :span="8" style="width: 300px">
                <div>
                  <img src="img/login2.jpg" style="height: 170px;">
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <h3>课程名：{{ course.courceName }}</h3>
                  <h4 style="color: #606266">任课教师：{{ course.userName }}</h4>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="container_body2">
            <div class="global_notice" @click="toGlobalNotice">
              <h4 style="color: white">院校通知</h4>
              <div class="null_notice" v-if="globalNoticeList.length == 0">点击查看详情</div>
              <div v-for="(notice,index) in globalNoticeList" :key="index" class="simple_notice_wrap">
                <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
                <div class="simple_notice_content">{{ notice.noticeContent.substring(0, 15) + '...' }}</div>
                <div class="simple_notice_time">{{ dateFormat(notice.updateTime) }}
                </div>
              </div>
            </div>
            <div class="class_notice" @click="toClassNotice">
              <h4 style="color: white">班级通知</h4>
              <div class="null_notice" v-if="classAndNoticeList.length == 0 || classAndNoticeList[0].length == 0">
                点击查看详情
              </div>
              <div v-for="(notice,index) in classAndNoticeList[0]" :key="index" class="simple_notice_wrap">
                <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
                <div class="simple_notice_content">{{ notice.noticeContent.substring(0, 15) + '...' }}</div>
                <div class="simple_notice_time">{{ dateFormat(notice.updateTime) }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "UpdateStudent",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      noticeList: [],
      searchText: '',
      courseList: [],
      globalNoticeList: [],
      classAndNoticeList: [],
      user: JSON.parse(window.localStorage.getItem('user')),
      formSearch: {
        coursename: '',
        userId: JSON.parse(window.localStorage.getItem('user')).userId,
      }
    };
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    search() {
      var _this = this;
      axios.post('http://localhost:8080/userinfo/findFuzzyQueryCourse', this.formSearch).then(res => {
        console.log(res)
        _this.courseList = res.data.data
        console.log("res.data.data")
        console.log(res.data.data)
        console.log(_this.courseList)
        console.log("_this.ccInfo")
      })
    },
    //跳转通知列表，通知类型为全局通知
    toGlobalNotice() {
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 0
        }
      });
    },
    //跳转通知列表，通知类型为全局通知
    toClassNotice() {
      var _this = this;
      console.log(this.classAndNoticeList);
      this.$router.push({
        path: '/classAndNoticeList',
        query: {
          classAndNoticeList: _this.classAndNoticeList
        }
      });
    },
    //获取前两条全局通知
    getFiveGlobalNotice() {
      const _this = this;
      axios.get('http://localhost:8080/notice/listGlobal/1/2').then(function (res) {
        _this.globalNoticeList = res.data.data.content
        console.log(_this.noticeList);
      })
    },
    //获取学生班级及其通知
    getClassNotice() {
      const _this = this;
      axios.get('http://localhost:8080/noticeLog/getClassAndNoticeByStuId/' + _this.user.userId).then(function (res) {
        _this.classAndNoticeList = res.data.data;
        console.log('班级通知');
        console.log(res.data.data);
      })
    },
    toCourseDirectory(course) {
      this.$router.push({
        path: '/courseDirectory',
        query: {
          course: course
        }
      })
    }
  }, created() {
    //加载学生的所有课程
    var _this = this;
    axios.get("http://localhost:8080/courseMaster/findStudentAllCourseByUserId?userId=" + _this.user.userId).then(function (res) {
      console.log(JSON.parse(window.localStorage.getItem('user')).userId);
      _this.courseList = res.data.data;
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log("_this.courseList");
      console.log(_this.courseList);
    })
    // this.getFiveGlobalNotice();
    // //获取
    // this.getClassNotice();
  }

}
</script>

<style scoped>
.container {
  height: 570px;
  margin-bottom: 30px;
}

.container_head {

}

.container_body1 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 170px;
  width: 77.6%;
  margin-left: 225px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
  color: black;
}

.container_body1:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}


.container_body2 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  text-align: left;
  height: 500px;
  width: 70%;
  margin-left: 13px;
  margin-top: 0px;
  padding: 10px;
  border-radius: 10px;
  /*margin-right:60px;*/
  /*background-color: #ccc;*/
  color: black;
  box-shadow: 0 0 10px rgb(0, 0, 0);
}

.container_body2:hover {

}

.null_notice {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  color: snow;
}

.global_notice {
  padding: 3px;
  height: 40%;
}

.global_notice:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
  border-radius: 10px;
}

.class_notice {
  padding: 3px;
  height: 55%;
}

.class_notice:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
  border-radius: 10px;
}

.simple_notice_wrap {
  background-color: white;
  width: 90%;
  margin: 10px auto;
  height: 50px;
  padding-top: 5px;
  padding-left: 20px;
  border-radius: 10px;
  /*border: 1px solid black;*/
}

.simple_notice_title {

  color: #f34545;
  font-weight: bold;
  font-size: 15px;
}

.simple_notice_content {
  margin-top: 2px;
  font-size: 12px;
}

.simple_notice_time {
  text-align: right;
  margin: 10px;
  /*margin-right: 6px;*/
  padding-right: 10px;
  font-size: 2px;
  color: #888;
}


.myH3 {
  margin-left: 91px

}

.sousuo {
  width: 250px;
  margin-left: 500px;
  margin-top: 12px
}

.tongzhi {
  margin-left: 220px
}
</style>
